<template>
  <!-- 搜索弹出框 -->
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />

    <!-- 底下展示三个界面其中的一个,不涉及路由跳转,就做成组件 -->
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />
    <SearchTipsList
      v-else-if="blockShow == 2"
      :searchTipsListData="searchTipsListData"
      @tagClick="tagClick"
    />
    <SearchProductList
      v-else-if="blockShow == 3"
      :productsListData="productsListData"
      :filterCategory="filterCategory"
      @categoryChange="categoryChange"
      @priceChange="priceChange"
    />
  </div>
</template>

<script>
import { mapMutations } from "vuex";

import HistoryHot from "../components/search/HistoryHot.vue";
import SearchTipsList from "../components/search/SearchTipsList.vue";
import SearchProductList from "../components/search/SearchProductList.vue";

import {
  GetHishotData,
  GetSearchTipsData,
  GetGoodsListData,
} from "@/request/api";

export default {
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProductList,
  },
  data() {
    return {
      // 搜索框的值,用户输入的值
      searchVal: "",
      // 搜索框中的提示热词
      placeVal: "",
      // blockShow变量用来控制切换搜索页面对应的界面
      // 1 表示 历史和热门界面
      // 2 表示 搜索提示列表
      // 3 表示 搜索产品列表
      blockShow: 1,
      //   历史记录的数组
      historyKeywordList: [],
      // 热门搜索的数组
      hotKeywordList: [],
      // 搜索提示列表的数据
      searchTipsListData: [],
      // 搜索产品列表的数据
      productsListData: [],
      // 产品列表的分类数据
      filterCategory: [],
      // 排列顺序，desc表示价格由高到低，asc表示价格由低到高
      order: "desc",
      // sort 可以是id或price 排序方式
      sort: "id",
      // 分类id
      // 分类的id
      categoryId: 0,
      // 防抖处理的定时器
      timer: null,
    };
  },
  created() {
    // 请求历史记录和热门搜索数据
    GetHishotData().then((res) => {
      if (res.errno == 0) {
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
        this.placeVal = defaultKeyword.keyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      }
    });
  },
  methods: {
    tagClick(value) {
      this.searchVal = value;
      this.onSearch(value);
    },
    priceChange(value) {
      this.sort = "price";
      this.order = value;
      this.onSearch(this.searchVal);
    },
    categoryChange(id) {
      this.categoryId = id;
      // 发送搜索请求
      this.onSearch(this.searchVal);
    },
    ...mapMutations({
      chanIsShowShadow: "showshadow/chanIsShowShadow",
    }),
    onSearch(value) {
      // value 是用户输入的内容
      // 回车之后执行这里的代码

      // 搜索的时候
      this.blockShow = 3;
      // console.log("执行了onSearch", value);

      // 发起搜索请求
      GetGoodsListData({
        keyword: value,
        // 细化搜索请求：为后面点击 价格由高到低(低到高)，或者点击分类选项 发起请求做准备
        order: this.order, // 告诉后端是由高到低或者低到高
        sort: this.sort, // 告诉后端按照id排序还是price来排序
        // 请求分类的id
        categoryId: this.categoryId,
      }).then((res) => {
        // console.log(res.data);
        // 解构的方式
        let { data, filterCategory } = res.data;
        this.productsListData = data;

        // 这里得到的后端数据和我们需要的格式不同  filterCategory需要自己改变格式
        // 需要把name处理成text    把id 处理成 value   数据还是原来的数据
        let newArr = filterCategory.map((item) => {
          // return  就是新数组每个元素的样子
          return { text: item.name, value: item.id, checked: item.checked };
        });

        this.filterCategory = newArr;

        // 总结经验:  后端给我们的数据和我们需要的格式不一样,我们就需要把后端给我们的数据处理成我们需要的格式
      });
    },

    onCancel() {
      //   console.log("点击取消");
      this.$router.go(-1);
      this.chanIsShowShadow(false);
      //   this.$router.push("/home")
    },
    onInput(value) {
      // 防抖   在每一次执行操作的时候，先判断定时器启动了没有，如果启动了，就应该先清除定时器
      // 减少输入期间的请求
      // if(下面这个定时器启动了){
      //     清除下面这个定时器
      // }
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // value 就是用户输入的内容
        // 用户正在输入的时候，要切换到第2个界面
        this.blockShow = 2;
        // 发送请求，请求和用户输入相关的提示
        console.log(value);
        GetSearchTipsData({
          keyword: value,
        }).then((res) => {
          // console.log(res.data);
          this.searchTipsListData = res.data;
        });
      }, 500);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: #efefef;
  z-index: 100;
}
</style>